<template>
  <div>
    <div v-if="userStore.closeMask" class="modal-mask" @click.self="closeModalHandle">
      <div class="modal-wrapper">
        <div class="modal-container" style="width: 696px">
          <div class="login-tabs">
            <!--左侧组件 -->
            <LeftLogo></LeftLogo>
            <div class="right-tabs">
              <div class="tabs">
                <SubjectTabs
                  :tabs="LoginStore.tabList"
                  :selectedTab="LoginStore.isActive"
                ></SubjectTabs>
                <div class="tab-content">
                  <component
                    :is="components[LoginStore.isActive]"
                    :isAgreeddValue="isAgreeddValue"
                    @login="handleLogin"
                  >
                  </component>
                  <!-- <PasswordLogin v-if="LoginStore.isActive === 'password'" >
                                </PasswordLogin>
                                <VerificationCodeLogin v-if="LoginStore.isActive === 'verification'"  :isAgreeddValue="isAgreeddValue" @login="handleLogin" />
                                <QRCodeLogin v-if="LoginStore.isActive === 'qrcode'" :isAgreeddValue="isAgreeddValue" @login="handleLogin" /> -->
                </div>
              </div>
              <!-- 用户协议 -->
              <agreement @change="handleChangeChecked"></agreement>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/User.js";
import { useLoginStore } from "@/stores/Login.js";
import PasswordLogin from "./PasswordLogin.vue";
import VerificationCodeLogin from "./VerificationCodeLogin.vue";
import QRCodeLogin from "./QRCodeLogin.vue";
import { setStorage } from "@/utils/index";
const router = useRouter();
const props = defineProps(["isVisible", "tabs"]);
const emit = defineEmits(["close"]);
const LoginStore = useLoginStore();
const userStore = useUserStore();
const isAgreeddValue = ref();
const components = {
  password: PasswordLogin,
  verification: VerificationCodeLogin,
  qrcode: QRCodeLogin,
};
//将协议是否确认传递数据
const handleChangeChecked = (v) => {
  isAgreeddValue.value = v;
};
/**
 * 登陆以后存储用户信息
 */
const handleLogin = async (loginData) => {
  userStore.closeMaskOut(false);
  console.log('登录成功');
  // await navigateTo(`/gmat?t=${Date.now()}`)
  // await navigateTo(`/gmat`);
  userStore.login(loginData);

  // 校验是否注册过
};

const checkRegistration = (loginData) => {
  // 这里添加校验逻辑
  return true; // 示例返回值
};

const closeModalHandle = () => {
  // emit('close');
  userStore.closeMaskOut();
};
</script>

<style scoped lang="scss">
.modal-mask {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(234, 244, 242, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  margin: 0 auto;
  overflow: hidden;
}

.login-tabs {
  display: flex;
  height: 410px;
}

.tab-content {
  padding: 20px 0px;
}

.right-tabs {
  flex: 1;
  padding: 30px;
}

// .right-check{
//     flex: 1;
//     font-size: 14px;
//     padding: 30px;

//     .back{
//         cursor: pointer;
//         margin-bottom: 50px;

//         img{
//             width: 30px;
//             height: 30px;
//             flex-shrink: 0;
//         }
//     }
// }

/**
  周内

*/
</style>
